<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位</title>
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}	
	#div1 {
		width: 200px;
		height: 200px;
		background-color: red;
		position: fixed;
		left:200px;
	}
	#div2 {
		width: 200px;
		height: 200px;
		background-color: cyan;
		
		

	}
	#div3 {
		width: 200px;
		height: 200px;
		background-color: red;

	}
	#div4 {
		width: 200px;
		height: 200px;
		background-color: red;
		position: absolute;
		left:400px;
	}
	#div5 {
		width: 200px;
		height: 200px;
		background-color: blue;
	}
	#div6 {
		width: 600px;
		height: 600px;
		background-color: red;
		margin: 50px auto 0;
		border:50px solid green;
		padding-right:100px; 
		position: relative;
		
	}
	#div7 {
		width: 500px;
		height: 500px;
		background-color: yellow;
		

	}
	#div8 {
		width: 400px;
		height: 400px;
		background-color: cyan;
		
	}
	#div9 {
		width: 300px;
		height: 300px;
		background-color: blue;
		position: absolute;
		right: 0px;
	}
	#div10 {
		width: 300px;
		height: 800px;
		background-color: red;
			
	}
	#div11 {
		width: 200px;
		height: 200px;
		background-color: blue;
		position: fixed;
		
	}
	body {
		height: 2000px;
		width: 4000px;

	}
	#p1 {
		width: 1280px;
		height: 100px;
		background-color: green;
		position: fixed;
		z-index: 1;
	}
	#p2 {
		width: 300px;
		height: 300px;
		background-color: yellow;
		position: absolute;
		top: 100px;
	}

	</style>
</head>
<body>
	<!-- 
		定位:
		position
		对元素的位置进行精确的调整
		定位一共有4个值:
		1.静态定位 static
		2.相对定位 relative
		3.绝对定位 absolute
		4.固定定位 fixed
		以上四个值只是规定了元素定位的方式,具体的元素该移动到哪里,需要通过left,right,top,bottom四个css样式决定.表示的意思是距离当前方位有多少px距离.

		注意:left,right,top,bottom四个css样式只对设置了非static的定位元素起效果!!!
	 -->

	 <!-- static 静态定位 默认值 -->
	 <!-- <div id="div1"></div> -->

	 <!-- relative 相对定位
		1.相对定位的元素不会失去自己的位置
		2.相对定位的元素移动参考位置是自己之前的位置
	  -->
	 <!-- <div id="div2"></div>
	 <div id="div3"></div> -->

	 <!-- absolute 绝对定位
		1.绝对定位的元素完全脱离文档流,会失去自己之前的位置
		2.绝对定位的元素移动的参考是距离它最近的设置了非static定位的祖先元素,如果所有的祖先元素都没有设置非static定位,则整个html文档定位

		注意:以后如果给一个元素设置了绝对定位,一般情况下,我们给元素的父级添加相对定位.
	  -->
	  <!-- <div id="div4"></div>
	  <div id="div5"></div> -->
	  <!-- <div id="div6">
	  	<div id="div7">
	  		<div id="div8">
	  			<div id="div9"></div>
	  		</div>
	  	</div>
	  </div> -->

	  <!-- fixed 固定定位
		1.固定定位的元素完全脱离文档流,会失去自己之前的位置
		2.固定定位的元素移动的参考位置是整个html文档
	   -->
	   <div id="div10"></div>
	   <div id="div11"></div>


	   <!-- 非static定位的元素层级高于普通元素,如果元素都因为定位脱离文档流,层级高低取决于书写顺序,后写的覆盖先写的 -->
	   <!-- <div id="d4">
	   		<div id="d1"></div>
	   		<div id="d2"></div>
	   		<div id="d3"></div>
	   </div> -->


		<!-- <p id="p1"></p>
		<p id="p2"></p> -->


		<!-- 
			z-index
			该样式只对非static定位的元素起效果.
			默认值0,值越大越靠近z轴正方向
		 -->
   		



</body>
</html>